<template>
  <div class="bg_f2">
    <div class="ub bg_w ub-pj pad_05" @click="showRule">
      <div class="ub">客票变更，退票须知</div>
      <div class="arrow_right ub-img"></div>
    </div>
    <div class="ub bg_w ub-pj pad_05 mar_t1">
      <div class="ub ub-ac">
        <div class="plane ub-img"></div>
        <div class="ub margin-l05">航班信息</div>
      </div>
      <div class="arrow_up ub-img" @click="showFlightInfo = !showFlightInfo" :class="{'arrow_up':showFlightInfo, 'arrow_down':!showFlightInfo}"></div>
    </div>
    <div class="ub ub_w pad_05 ub-ver bg_w fz08 lh_15 border_t01" v-if="exits" v-show="showFlightInfo">
      <div class="ub">
        <div class="ub">{{exits.beginCity}}</div>
        <div class="ub-img flyto"></div>
        <div class="ub">{{exits.endCity}}</div>
      </div>
      <div class="ub">
        <div class="ub">{{exits.flightNo}}</div>
        <div class="ub">｜</div>
        <div class="ub">{{exits.flightDate}}</div>
        <div class="ub margin-l05">{{$utils.getWeek(exits.flightDate).third}}</div>
        <div class="ub margin-l05">{{exits.depTime}}</div>
      </div>
      <div class="ub" v-html="exits.description"></div>
    </div>
    <div class="ub bg_w ub-pj pad_05 mar_t1">
      <div class="ub ub-ac">
        <div class="passenger ub-img"></div>
        <div class="ub margin-l05">选择退票乘机人</div>
      </div>
    </div>
    <div class="ub bg_w pad_05 border_t01 ub-ver">
      <div class="ub ub-ver" v-for="(item, index) in guests" v-show="item.paxs[0].ticketCanRefund == true">
        <div class="ub ub-pj">
          <div class="ub ub-ac">
            <div class="ub">{{item.tname}}</div>
            <div class="ub fz08 margin-l05">{{item.ttype}}</div>
          </div>
          <div class="ub-img" :class="{'checkbox_on':selPiIndex[index] , 'checkbox_off':!selPiIndex[index]}" @click="selPassenger(index)"></div>
        </div>
        <div class="ub ub-ac pad_t05">
          <div class="ub">票号</div>
          <div class="ub margin-l05">{{item.paxs[0].ticketNo}}</div>
          <div class="ub fc_green margin-l05">正常</div>
        </div>
      </div>

    </div>
    <div class="ub bg_w ub-pj pad_05 mar_t1">
      <div class="ub ub-ac">
        <div class="tui_why ub-img"></div>
        <div class="ub margin-l05">退票原因</div>
      </div>
      <div class="ub">
        <div class="ub">
          <div class="ub" @click="ifFreeWill = true">
            <div class="ub-img" :class="{'radio_checked': ifFreeWill , 'radio_unchecked': !ifFreeWill}"></div>
            <div class="ub margin-l05">自愿</div>
          </div>
          <div class="ub" @click="ifFreeWill = false">
            <div class="ub-img mar_l3" :class="{'radio_checked': !ifFreeWill , 'radio_unchecked': ifFreeWill}"></div>
            <div class="ub margin-l05">非自愿</div>
          </div>
        </div>
      </div>
    </div>
    <div class="ub fc_8a lh_15 pad_05 bg_w fz08" v-show="ifFreeWill">
      将收取相应舱位价格一定比例的退票费，如果是变更后的客票退票，变更费票款，差额不退，按照变更后的舱位及退票时间收取相应退票费。
    </div>
    <textarea class="ub fc_8a lh_15 pad_05 bg_w txarea" placeholder="非自愿退票：如航班取消、航班延误、病退等情况，请写明原因。提交退票后您的机票将被立即取消无法恢复，如不符合条件将按照自愿退票处理。如收到航班变动的短信通知，请在官方渠道查询航班动态并确认，以防诈骗！" v-show="!ifFreeWill" v-model="textArea">
    </textarea>
    <div class="ub bg_w ub-pj mar_t1 ub-ver">
      <div class="ub ub-ac pad_05">
        <div class="tui_info ub-img"></div>
        <div class="ub margin-l05">退票说明</div>
      </div>
      <div class="ub fc_8a lh_15 border_t01 pad_05">
        航班正常情况下，不允许退订餐食，如因航空公司原因导致航班不正常时，可通过呼叫中心申请退还已支付的餐食费用。逾重行李只能在机票已退的情况下申请全额退还。
      </div>
    </div>
    <div class="zanwei"></div>
    <div class="footer">
      <div class="ub ub-ac ub-pc" @click="nextStep">下一步</div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
// import staticData from './detail.js'
const willArr = ['VOLUNTARY', 'INVOLUNTARY'];
export default {
  created: function () {
    this.$store.commit('changeHeader', { // 提交首页header
      left: '返回',
      right: '',
      middle: '申请退票',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '/home',
      rightIcon: 'homeIcon'
    });
    this.getRefoundDetail();
  },
  data: function () {
    return {
      ifFreeWill: true,
      showFlightInfo: true,
      exits: '',
      guests: '',
      selPiIndex: [],
      textArea: ''
    }
  },
  components: {
  },
  computed: mapState(['loginData', 'allOrders']),
  methods: {
    nextStep: function () {
      let checkSel = this.checkSel();
      console.log(checkSel);
      if (checkSel.sel === 0) { // 没有选择任何人
        this.$store.dispatch('showTx', { text: '请选择乘机人' });
        return false;
      }
      // if (checkSel.unsel !== 0 && !checkSel.unselHasAdult) {
      //   this.$store.dispatch('showTx', { text: '未提退儿童或婴儿需有成人陪伴' });
      //   return false;
      // }
      if (!this.ifFreeWill && !this.textArea) {
        this.$store.dispatch('showTx', { text: '请输入退票原因' });
        return false;
      }
      let content = this.setContent(checkSel.selArr);
      console.log(content);
      this.$store.commit('setRefundContent', content);
      this.$router.push('/ApplyCheck');
    },
    setContent: function (selArr) {
      console.log(selArr);
      let me = this;
      let paxIdsInfos = [];
      let paxIds = [];
      selArr.forEach(function (item, index) { // paxIdsInfos 组装
        // console.log('-----------------------------');
        // console.log(me.guests);
        let paxs = me.guests[item].paxs[0];
        let jianjie = paxs.refundRule;
        let beginCity = paxs.beginCity;
        let flightNo = paxs.flightNo;
        let flightDate = paxs.flightDate;
        let depTime = paxs.depTime;
        let ticketNum = paxs.ticketNo;
        let tname = paxs.gname;
        let paxId = paxs.paxId;
        paxIds.push(paxId);
        let endCity = paxs.endCity;
        let paxItem = {
          jianjie,
          beginCity,
          flightNo,
          flightDate,
          depTime,
          ticketNum,
          tname,
          paxId,
          endCity
        }
        paxIdsInfos.push(paxItem);
      });
      let type = '3';
      paxIds = paxIds.join(',');
      let refundType = this.ifFreeWill ? willArr[0] : willArr[1];
      let areatext = this.ifFreeWill ? '' : this.textArea;
      let showOrder = this.allOrders.showOrder;
      let orderId = showOrder.orderId + '';
      let reservationCode = showOrder.orderNo
      let userInfo = this.loginData.userInfo;
      let userId = userInfo.userId + '';
      // let loginToken = userInfo.token.loginToken;
      let content = {
        refundType,
        paxIdsInfos,
        areatext,
        orderId,
        paxIds,
        type,
        userId,
        reservationCode
      }
      return content;
    },
    checkSel: function () { // 检查选择的
      let result = {};
      let sel = 0;
      let selArr = [];
      let unsel = 0;
      let unselHasAdult = false;
      let self = this;
      this.selPiIndex.forEach(function (item, index, arr) {
        if (item) {
          sel++;
          selArr.push(index);
        } else {
          unsel++;
          if (self.guests[index].ttype === '成人') {
            unselHasAdult = true;
          }
        }
      });
      result.sel = sel;
      result.selArr = selArr;
      result.unsel = unsel;
      result.unselHasAdult = unselHasAdult;
      return result;
    },
    getRefoundDetail: function () { // 获取退票详情
      let showOrder = this.allOrders.showOrder;
      let orderId = showOrder.orderId + '';
      let reservationCode = showOrder.orderNo
      let userInfo = this.loginData.userInfo;
      let userId = userInfo.userId + '';
      let loginToken = userInfo.token.loginToken;
      let content = {
        orderId: orderId,
        reservationCode: reservationCode
      }
      console.log(content);
      let data = this.$utils.getUserContent(content);
      data.headers.userId = userId;
      data.headers.loginToken = loginToken;
      // this.successDo();
      let self = this;
      this.$utils.ajax(data, 'refundDetail', self, function (data) {
        console.log(data);
        let orders = data.content.orders;
        // orders = staticData.content.orders // 测试数据
        let exits = orders.go;
        self.exits = exits;
        // let refunds = data.refunds
        let guests = orders.guests
        self.guests = guests;
        let arr = [];
        guests.forEach(function (item, index) {
          arr.push(false);
        });
        self.selPiIndex = arr;
      });
    },
    successDo: function () {
      let exits = {
        beginCity: '海口',
        depTime: '23:20',
        description: '退票费：航班计划离站时间14天（含）外 - 5%；       ↵<br>航班计划离站时间14天（不含）内至航班计划离站时间7天（含）外 - 20%；       ↵<br>航班计划离站时间7天（不含）内至航班计划离站时间72小时（含）外 - 30%；       ↵<br>航班计划离站时间72小时（不含）内至航班计划离站时间24小时（含）外 - 50%；       ↵<br>航班计划离站时间24小时（不含）内至航班计划离站时间4小时（含）外 - 80%；       ↵<br>航班计划离站时间4小时（不含）内及航班计划离站时间后，收取票面100%退票费，即不得自愿退票。',
        endCity: '重庆',
        flightDate: '2017-12-17',
        flightNo: 'PN6348'
      };
      let guests = [
        {
          docNumber: '500382199112101966',
          docType: 'ID_CARD',
          paxs: [
            {
              beginCity: '海口',
              cabin: 'N',
              depTime: '23:20',
              endCity: '重庆',
              flightDate: '2017-12-17',
              flightNo: 'PN6348',
              gname: '测试刘丹',
              gtype: 'ADULT',
              paxId: '1_1',
              refundRule: '退票费：航班计划离站时间14天（含）外 - 5%；       ↵<br>航班计划离站时间14天（不含）内至航班计划离站时间7天（含）外 - 20%；       ↵<br>航班计划离站时间7天（不含）内至航班计划离站时间72小时（含）外 - 30%；       ↵<br>航班计划离站时间72小时（不含）内至航班计划离站时间24小时（含）外 - 50%；       ↵<br>航班计划离站时间24小时（不含）内至航班计划离站时间4小时（含）外 - 80%；       ↵<br>航班计划离站时间4小时（不含）内及航班计划离站时间后，收取票面100%退票费，即不得自愿退票。',
              resStatus: 'BOOKED',
              ticketNo: '847-2473710270',
              ticketStatus: 'OPEN'
            }
          ],
          phone: '17784316659',
          sequence: '1',
          tname: '测试刘丹',
          ttype: '成人'
        }
      ]
      this.exits = exits;
      this.guests = guests;
    },
    showRule: function () {
      let content = {
        columnId: '117',
        detail: '',
        listTitle: '客票变更，退票须知',
        detailTitle: '',
        newsTypeId: '',
        firstDate: [],
        secondDate: []
      }
      this.$store.commit('sethelpCenter', content);
      this.$router.push('/helpCenterList')
    },
    selPassenger: function (index) {
      let old = this.selPiIndex[index]
      this.selPiIndex.splice(index, 1, !old);
    }
  }
}
</script>

<style lang="stylus" scoped >
@import '../../stylus/base.styl';
.arrow_up
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('arrow_up@2x.png');
.arrow_right
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('arrow_right@2x.png');
.arrow_down
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('arrow_down@2x.png');
.plane
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('tui_fly.png');
.passenger
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('detail_passengers@2x.png');
.tui_why
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('tui_why.png');
.radio_checked
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('tui_radio_checked.png');
.radio_unchecked
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('tui_radio_unchecked.png');
.tui_info
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('tui_info.png');
.mar_l3
  margin-left: f_times(3);
.fc_8a
  color: #8a8a8a;
.lh_15
  line-height: f_times(1.5);
.border_t01
  border-top: 1px solid #f2f2f2;
.txarea
  height: 10rem;
  width: 90%;
  outline: 0;
  background: #F3F3F3;
  box-sizing: border-box;
  margin: f_times(1) auto 0;
.flyto
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('tui_flyto.png');
.fc_green
  color: #9DD48B;
.checkbox_on
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('checkbox_on.png');
.checkbox_off
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('checkbox_off.png');
.zanwei
  width: 100%;
  height: f_times(3);
  background-color: #fff;
.footer
  position: fixed;
  bottom: 0;
  width: 100%;
  height: f_times(2.5);
  line-height: f_times(2.5);
  background-color: #fff;
  >div
    width: 60%;
    height: f_times(2.5);
    background-color: #843D99;
    margin: 0 auto;
    color: #fff;
    border-radius: 5px;
</style>